
import { Component } from "react";
import type { ReactNode } from 'react'
interface iPro {
    name: string
    list: string[]
}
interface iState {
    list: string[]
    proList: iPro[]
    arr: number[][]
}
export default class App extends Component {

    state: iState = {
        list: ['瞧一瞧', '看一看', '走一走', '逛一逛', '扭一扭', '泡一泡', '舔一舔'],
        proList: [
            {
                name: '小米',
                list: [
                    '米1',
                    '米2',
                    '米3',
                    '米4'
                ]
            },
            {
                name: '华为',
                list: [
                    '华1',
                    '华2',
                    '华3',
                    '华4'
                ]
            }
        ],
        arr: [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9]
        ]
    }

    render() {

        let str = this.state.proList.map((item: iPro) => {
            return <li key={item.name}>
                <h2>{item.name}</h2>
                {item.list.map((val: string) => {
                    return <span key={val}>{val}</span>
                })}
            </li>
        })


        return <>
            <div>
                <h1>父组件</h1>

                <ol>
                    {/* 循环的时候一定要有一个 key 属性，key 表示唯一标识符 */}
                    {/* 用来绑定真实 DOM 和 虚拟 DOM 的关键字 */}
                    {this.state.list.map((item: string, index: number) => {
                        return <li key={index}>{item}</li>
                    })}
                </ol>


                <ul>
                    {str}
                </ul>


                <ul>
                    {this.state.arr.map((item: number[], index: number) => {
                        return <li key={index + 100}>
                            {item.map((val: number, index: number) => {
                                return <span key={val}>{val}</span>
                            })}
                        </li>
                    })}
                </ul>


            </div>
        </>
    }

}